<template>
	<div id="basicInformation">
		<el-row>
			<el-col :span="4" class="backgroundTitelBox">
				{{ $t('agent.contract_info') }}
			</el-col>
			<el-col :span="2" class="refrestBox">
				<el-button
					type="primary"
					icon="el-icon-refresh"
					@click="refresh"
				>
					{{ $t('common.refresh') }}
				</el-button>
			</el-col>
		</el-row>
		<div class="titelBox">{{ $t('agent.contract_info') }}</div>
		<el-row v-if="contranctInforData.contractModel !== 2" class="msgList">
			<el-col :span="6">
				{{ $t('agent.contract_mode') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						[1, 3].includes(contranctInforData.contractModel)
							? $t('agent.commission_contract')
							: '-'
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.contract_policy') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						contranctInforData.commissionPolicyTypeId
							? commissionPolicy(
									contranctInforData.commissionPolicyTypeId
							  )
							: '-'
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.sign_status') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span
					:class="
						contranctInforData.commissionContractId === '0'
							? 'redColor'
							: ''
					"
				>
					{{
						contranctInforData.commissionContractId === '0'
							? $t('agent.sign_no')
							: $t('agent.sign_yes')
					}}
				</span>
			</el-col>
		</el-row>
		<el-row v-if="contranctInforData.contractModel !== 1" class="msgList">
			<el-col :span="6">
				{{ $t('agent.contract_mode') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						[2, 3].includes(contranctInforData.contractModel)
							? $t('agent.rebate_contract')
							: '-'
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.contract_policy') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						contranctInforData.rebatePolicyTypeId
							? rebatePolicy(
									contranctInforData.rebatePolicyTypeId
							  )
							: '-'
					}}
				</span>
			</el-col>
			<el-col :span="6">
				{{ $t('agent.sign_status') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span
					:class="
						contranctInforData.rebateContractId === '0'
							? 'redColor'
							: ''
					"
				>
					{{
						contranctInforData.rebateContractId === '0'
							? $t('agent.sign_no')
							: $t('agent.sign_yes')
					}}
				</span>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<div
			v-if="[1, 3].includes(contranctInforData.contractModel)"
			class="titelBox"
		>
			{{ $t('agent.commission_contract') }}
		</div>
		<el-table
			v-if="[1, 3].includes(contranctInforData.contractModel)"
			border
			size="mini"
			class="small-size-table"
			:data="commissionContractData"
			:header-row-style="{ height: '24px', lineHeight: '24px' }"
			style="margin: 10px 0 30px 0; z-index: 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				type="index"
				:label="$t('common.serial_number')"
			></el-table-column>
			<el-table-column
				prop="rebateRate"
				align="center"
				:label="$t('agent.rebate_rate')"
			>
				<template slot-scope="scope">
					{{ (scope.row.rebateRate * 100).toFixed(2) }}%
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="netAmount"
				:label="
					$t('agent.agent_net_win_loss') +
						'(' +
						parentData.currencySymbol +
						')'
				"
			>
				<template slot-scope="scope">
					≥{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							scope.row.netAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="activeUsers"
				align="center"
				:label="$t('agent.month_active_people_number')"
			>
				<template slot-scope="scope">
					≥{{ scope.row.activeUsers }}
				</template>
			</el-table-column>
			<el-table-column
				prop="monthAddActiveCount"
				align="center"
				:label="$t('agent.month_active_people_new_add')"
			>
				<template slot-scope="scope">
					≥{{ scope.row.monthAddActiveCount }}
				</template>
			</el-table-column>
		</el-table>
		<el-divider
			v-if="[1, 3].includes(contranctInforData.contractModel)"
		></el-divider>
		<div
			v-if="[2, 3].includes(contranctInforData.contractModel)"
			class="titelBox"
		>
			{{ $t('agent.rebate_contract') }}
		</div>
		<el-table
			v-if="[2, 3].includes(contranctInforData.contractModel)"
			border
			size="mini"
			class="small-size-table"
			:data="rebateContractData"
			:header-row-style="{ height: '24px', lineHeight: '24px' }"
			style="margin: 10px 0 30px 0; z-index: 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				type="index"
				:label="$t('common.serial_number')"
			></el-table-column>
			<el-table-column
				prop="rebateRate"
				align="center"
				:label="$t('agent.rebate_rate3')"
			>
				<template slot-scope="scope">
					{{ (scope.row.rebateRate * 100).toFixed(2) }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				:label="$t('agent.game_trade')"
			>
				<template slot-scope="scope">
					≥{{ parentData.currencySymbol
					}}{{
						handleNumberAgent(
							parentData.currency,
							scope.row.validBetAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="activeUsers"
				align="center"
				:label="$t('agent.active_people_number')"
			>
				<template slot-scope="scope">
					≥{{ scope.row.activeUsers }}
				</template>
			</el-table-column>
			<el-table-column
				prop="effecactiveUsers"
				align="center"
				:label="$t('agent.active_people_new_add')"
			>
				<template slot-scope="scope">
					≥{{ scope.row.effecactiveUsers }}
				</template>
			</el-table-column>
		</el-table>
		<el-divider
			v-if="[2, 3].includes(contranctInforData.contractModel)"
		></el-divider>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import dayjs from 'dayjs'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => {} },
		contranctInforData: { type: Object, default: () => {} },
		commissionContractList: { type: Array, default: () => [] },
		rebateContractList: { type: Array, default: () => [] }
	},
	data() {
		return {
			activeL: false,
			commissionContractData: [],
			rebateContractData: [],
			commissionContract: [],
			rebateContract: []
		}
	},
	computed: {},
	watch: {
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true,
			immediate: true
		},
		commissionContractList: {
			handler(val) {
				this.commissionContractData = val
			},
			deep: true,
			immediate: true
		},
		rebateContractList: {
			handler(val) {
				this.rebateContractData = val
			},
			deep: true,
			immediate: true
		}
	},
	created() {
		this.getPolicyTypeArr()
		this.refresh()
	},
	mounted() {},
	methods: {
		handleNumberAgent(sign, num) {
			const number = num === null ? (num = 0) : num
			return this.handleNumber(sign, number)
		},
		getPolicyTypeArr() {
			this.rebateContract = []
			this.commissionContract = []
			this.$api
				.getProxyMinContractPolicyTypeList({ contractType: 1 })
				.then((res) => {
					if (res?.code === 200) {
						this.commissionContract = res?.data || []
						this.commissionContract.push({
							id: 0,
							policyType: this.$t('agent.custom')
						})
					} else {
						this.commissionContract = []
					}
				})
			this.$api
				.getProxyMinContractPolicyTypeList({ contractType: 2 })
				.then((res) => {
					if (res?.code === 200) {
						this.rebateContract = res?.data || []
						this.rebateContract.push({
							id: 0,
							policyType: this.$t('agent.custom')
						})
					} else {
						this.rebateContract = []
					}
				})
		},
		commissionPolicy(val) {
			if (val) {
				let policyType = '-'
				for (let i = 0; i < this.commissionContract.length; i++) {
					const obj = this.commissionContract[i]
					if (val * 1 === obj.id) {
						policyType = obj.policyType
					}
				}
				return policyType
			} else {
				return '-'
			}
		},
		rebatePolicy(val) {
			if (val) {
				let policyType = '-'
				for (let i = 0; i < this.rebateContract.length; i++) {
					const obj = this.rebateContract[i]
					if (val * 1 === obj.id) {
						policyType = obj.policyType
					}
				}
				return policyType
			} else {
				return '-'
			}
		},
		mangleRefresh() {
			this.$emit('getInfo')
		},
		refresh() {
			this.activeL = true
			this.commissionContractData = []
			this.rebateContractData = []
			const Com = {
				commissionContractId: this.contranctInforData
					.commissionContractId,
				merchantId: this.contranctInforData.merchantId,
				pageNum: 1,
				pageSize: 100
			}
			const Reb = {
				rebateContractId: this.contranctInforData.rebateContractId,
				pageNum: 1,
				pageSize: 100
			}
			this.$api.getProxyProxyDetailContract(Com).then((res) => {
				if (res?.code === 200) {
					this.commissionContractData = res.data.commissionResp || []
					this.activeL = false
				}
			})
			this.$api.getProxyProxyDetailContract(Reb).then((res) => {
				if (res?.code === 200) {
					this.rebateContractData = res.data.rebateResp || []
					this.activeL = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	line-height: 40px;
	padding-top: 10px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.titelBox {
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	position: relative;
}
.backgroundTitelBox {
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.refrestBox {
	text-align: center;
	margin: 0 10px;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}
</style>
